<template>
	<view>
		        <view class="tabbar-item" v-for="(item, index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
		            @click="changeItem(item)">
		            <view class="item-top">
		                <image :src="currentItem == item.id ? item.selectIcon : item.icon"></image>
		            </view>
		            <view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
		                <text>{{ item.text }}</text>
		            </view>
		        </view>
	</view>
</template>

<script setup>
    import {
        defineProps,
        onMounted,
        ref
    } from "vue"
    const props = defineProps({
        currentPage: {
            type: Number,
            default: 0
        }
    })
    const currentItem = ref(0);
    const tabbarList = ref([{
            id: 0,
            path: '/pages/index/index',
            icon: '/static/tabbar/home.png',
            selectIcon: '/static/tabbar/home_o.png',
            text: '首页',
            centerItem: false
        },
        {
            id: 1,
            path: '/pages/enquiry/enquiry',
            icon: '/static/tabbar/enquiry.png',
            selectIcon: '/static/tabbar/enquiry.png',
            text: '问询',
            centerItem: true
        },
        {
            id: 2,
            path: '/pages/my/my',
            icon: '/static/tabbar/mine.png',
            selectIcon: '/static/tabbar/mine_o.png',
            text: '我的',
            centerItem: false
        }
    ]);

    function changeItem(item) {
        uni.switchTab({
            url: item.path
        });
    }

    onMounted(() => {
        currentItem.value = props.currentPage;
        // 非微信小程序需隐藏原生tabBar（微信小程序已通过"custom": true配置项隐藏原生tabbar）
        if (process.env.VUE_APP_PLATFORM != 'mp-weixin') {
            uni.hideTabBar()
        }
    });
</script>

<style>

    view {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .tabbar-container {
        position: fixed;
        bottom: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        width: 726rpx;
        height: 110rpx;
        /* box-shadow: 0 0 5px    #8d6c36; */
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 5rpx 0;
        color: #8d6c36;
        background-color: #f3d9a6;
    }

    .tabbar-container .tabbar-item {
        width: 20%;
        height: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .tabbar-container .item-active {
        color: #6b3d01;
    }

    .tabbar-container .center-item {
        display: block;
        position: relative;
    }

    .tabbar-container .tabbar-item .item-top {
        width: 70rpx;
        height: 70rpx;
        padding: 10rpx;
    }

    .tabbar-container .center-item .item-top {
        flex-shrink: 0;
        width: 140rpx;
        height: 140rpx;
        padding: 20rpx;
        position: absolute;
        top: -70rpx;
        /* left: calc(50% - 50rpx); */
        border-radius: 50%;
        /* box-shadow: 0 0 5px #999; */
        background-color: #f3d9a6;
    }

    .tabbar-container .tabbar-item .item-top image {
        width: 50rpx;
        height: 50rpx;
    }

    .tabbar-container .center-item .item-top image {
        width: 100rpx;
        height: 100rpx;
    }

    .tabbar-container .tabbar-item .item-bottom {
        font-size: 28rpx;
        width: 100%;
    }

    .tabbar-container .center-item .item-bottom {
        position: absolute;
        bottom: 0;
    }

</style>
